<template>
	<layout safeArea :navObj="navObj" :navbackgroundColor="navbgc">
		<view slot="medi">
			<dQrcode></dQrcode>

			<uni-section class="mb-10" title="图片处理" sub-title="可以去除图片背景" type="line"></uni-section>
			<!-- lottery -->

			<uni-section class="mb-10" title="抽奖页面" type="line"></uni-section>
			<button type="default" @click="lotteryClick">查看</button>
			
			<uni-section class="mb-10" title="随机抽奖号码" type="circle"></uni-section>
			<button class="btn-grad" @click="randomNumber">前往查看</button>
		</view>
		<view slot="bottom"></view>
	</layout>
</template>

<script>
import dQrcode from './components/qrcode.vue';
export default {
	components: {
		dQrcode
	},
	data() {
		return {
			navObj: {
				title: '工具'
			},
			navbgc: 'linear-gradient(to right, #6739b6, #5a4e59)'
		};
	},
	methods:{
		lotteryClick(){
			uni.navigateTo({
				url:"/pagesToolPage/lottery/lottery"
			})
		},
		randomNumber(){
			uni.navigateTo({
				url:"/pagesToolPage/lottery/randomNumber"
			})
		},
	}
};
</script>

<style lang="less">
	.btn-grad {
		background-image: linear-gradient(to right, #E55D87 0%, #5FC3E4 51%, #E55D87 100%);
		margin: 10px;
		padding: 8px 45px;
		text-align: center;
		text-transform: uppercase;
		transition: 0.5s;
		background-size: 200% auto;
		color: white;
		box-shadow: 0 0 20px #eee;
		border-radius: 10px;
		display: block;
	}
	
	.btn-grad:hover {
		background-position: right center;
		/* change the direction of the change here */
		color: #fff;
		text-decoration: none;
	}
</style>
